<template>
  <div>
    <svg-icon
      v-show="!isFull"
      class="icon"
      icon-class="fullscreen"
      @click="handleToggle"
    />
    <svg-icon
      v-show="isFull"
      class="icon"
      icon-class="exit-fullscreen"
      @click="handleToggle"
    />
  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  data() {
    return {
      isFull: false
    }
  },
  methods: {
    handleToggle() {
      // 1. 判断浏览器是否支持全屏和取消全屏
      if (screenfull.isEnabled) {
        // 实现全屏和取消全屏的切换
        screenfull.toggle()
        this.isFull = !this.isFull
      } else {
        this.$message.warning('您的浏览器不支持该功能~')
      }
    }
  }
}
</script>

<style>
  .icon{
    width: 20px;
    height: 20px;
    fill: white !important;
  }
</style>
